import React from 'react';

import './index.less';

import {render} from 'src/hrpub/common/frame';

import {
    base
} from 'nc-lightapp-front';

import ModelAction from "./actions"

const {
    NCModal,
    NCTabs,
    NCSelect,
    NCButton
} = base;

const {NCOption} = NCSelect;

const {NCTabPane} = NCTabs;

const {
    Header,
    Body,
    Footer
} = NCModal;

export default render({
    actions: {
        modelAct: ModelAction,
    },
    state: {
        organizationVisible: false,
        orgStaOrgDimension: null,
        orgStaOptions: [],
        orgStaActiveTab: 'dept',
    }
})(({props, state, action}) => {
    const {
        transfer,
        editTable
    } = props;

    return (
        <NCModal
            show={state.organizationVisible}
            size="lg"
            onHide={action.modelAct.closeBatchModal}
            className="organization-modal"
        >
            <Header
                closeButton={true}
            >
                {transfer.language['gx6008-000053']/** 编制情况 */}
            </Header>
            <Body>
            <div className="org-situation-modal-body">
                <div className="org-dimension">
                    {transfer.language['gx6008-000054']/** 编制维度 */}
                    <div className="org-dimension-select-wrapper">
                        {state.orgStaOptions.length > 0 && <NCSelect
                            style={{width: '160px'}}
                            showClear={false}
                            onChange={action.modelAct.changeOrgDimension}
                            value={state.orgStaOrgDimension}
                        >
                            {state.orgStaOptions.map((item, index) => {
                                return (
                                    <NCOption
                                        key={item.value}
                                        value={item.value}
                                    >
                                        {item.display}
                                    </NCOption>
                                );
                            })}

                        </NCSelect>}
                    </div>
                </div>
                <div>
                    <NCTabs
                        activeKey={state.orgStaActiveTab}
                        onChange={action.modelAct.changeTab}
                    >
                        <NCTabPane
                            key="org"
                            tab={transfer.language['gx6008-000055']/** "组织编制" */}
                        >
                            {editTable.createEditTable('org')}
                        </NCTabPane>
                        <NCTabPane
                            key="dept"
                            tab={transfer.language['gx6008-000056']/** "部门编制" */}
                        >
                            {editTable.createEditTable('dept')}
                        </NCTabPane>
                    </NCTabs>
                </div>
            </div>
            </Body>
            <Footer>
                <div className="organization-modal-footer">
                    <NCButton
                        onClick={action.modelAct.closeBatchModal}
                    >
                        {transfer.language['gx6008-000119']/** 关闭 */}
                    </NCButton>
                </div>
            </Footer>
        </NCModal>
    );

});
